<template>
	<view class="container">
		<view class="header">
			<view class="search-box">
				<input type="text" placeholder="搜索宠物服饰" />
				<text class="search-btn">搜索</text>
			</view>
		</view>
		
		<view class="category-filter">
			<view class="filter-item active">全部</view>
			<view class="filter-item">狗狗服饰</view>
			<view class="filter-item">猫咪服饰</view>
			<view class="filter-item">季节款</view>
			<view class="filter-item">节日款</view>
		</view>
		
		<view class="product-list">
			<view class="product-item" v-for="(item, index) in productList" :key="index" @click="goToDetail(item.id)">
				<image :src="item.image" mode="aspectFill" class="product-image"></image>
				<view class="product-info">
					<view class="product-title">{{item.title}}</view>
					<view class="product-price">¥ {{item.price}}</view>
					<view class="product-sales">销量: {{item.sales}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [
					{
						id: '1',
						title: '宠物冬季保暖衣',
						price: '59.90',
						sales: 256,
						image: '/static/logo.png'
					},
					{
						id: '2',
						title: '宠物春秋薄款卫衣',
						price: '49.90',
						sales: 198,
						image: '/static/logo.png'
					},
					{
						id: '3',
						title: '宠物节日装扮服饰',
						price: '69.90',
						sales: 145,
						image: '/static/logo.png'
					},
					{
						id: '4',
						title: '宠物雨衣防水服',
						price: '79.90',
						sales: 87,
						image: '/static/logo.png'
					}
				]
			}
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/product-detail?id=' + id
				});
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 20rpx;
	}
	
	.header {
		padding: 20rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	
	.search-box {
		display: flex;
		background-color: #F5F5F5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
	}
	
	.search-box input {
		flex: 1;
		font-size: 28rpx;
	}
	
	.search-btn {
		font-size: 28rpx;
		color: #FF6600;
		padding-left: 20rpx;
	}
	
	.category-filter {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 100rpx;
		overflow-x: auto;
		white-space: nowrap;
	}
	
	.filter-item {
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		background-color: #F5F5F5;
	}
	
	.filter-item.active {
		background-color: #FF6600;
		color: #FFFFFF;
	}
	
	.product-list {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.product-item {
		width: 48%;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.product-image {
		width: 100%;
		height: 350rpx;
	}
	
	.product-info {
		padding: 20rpx;
	}
	
	.product-title {
		font-size: 28rpx;
		line-height: 1.5;
		height: 84rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.product-price {
		font-size: 32rpx;
		color: #FF6600;
		margin-top: 10rpx;
	}
	
	.product-sales {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
</style> 